<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>联盟论坛</title>
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.css" >
<link type='text/css' rel='stylesheet' href="${base}/foreground/css/style.css" />
<link type="text/css" rel="stylesheet" href="${base}/res/layui/css/layui.css">
<style>

	*{
		margin:0;
		padding:0;
	}
	#user-text{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#user-text p{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#jiantou{
		background:url(${base}/foreground/images/jiantou.png) center center no-repeat;
		width: 33px;
		height: 11px;
		display: block;
		padding: 10px 0;
		margin-top: 16px;
	}
	#container{
		text-transform: uppercase;
		color: #fff;font-weight: 700;
		font: 16px 瀹嬩綋 Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#hero_content{
		float:left;
		padding:30px 0 0;
		position:relative;
		margin:0;
		display:block;
		list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
        font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    color: #666;
	}
	#hero_content li{
		float: left;
    width: 120px;
    height: 100px;
    margin-bottom: 22px;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    list-style-type: none;
    display: list-item;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    color: #666;
	}
	#hero_content a{
		color: #666;
		text-decoration: none;
		cursor: pointer;
		text-align: center;
    line-height: 15px;
    list-style-type: none;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
	}
	#hero_content img{
		width: 66px;
    height: 65px;
    display: block;
    margin: 0 auto 7px;
    border: 0;
    color: -webkit-link;
    cursor: pointer;
    text-align: center;
    line-height: 15px;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
	}
	#hero_content p{
		display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	}
	.nav>li>a:focus,.nav>li>a:hover{
		background-color:#000000;
	}
	.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
		background-color: #000000;
	} 
	.navbar-nav>li>.dropdown-menu{
		background-color: #000000;
	}
	.dropdown-menu>li>a{
		color:#fff;
	}
	#current_user{
		color: #fff;
	}
	.caret{
		color: #fff;
	}
	.modal-body table>tbody>tr>td{
		    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    cursor: pointer;
	}
</style>

</head>
<body >
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.jsp"><img src="${base}/foreground/images/logo.png" alt=""></a>
		</div>
	
		<div class="navigation">
			<ul class="navig cl-effect-3" style="float:left; width:400px">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li><a href="${base }/foreground/hero.jsp">英雄资料</a></li>
				<li><a href="${base }/foreground/blog.jsp">联盟论坛</a></li>
				<li><a href="${base }/foreground/index.jsp">关于</a></li>
			</ul>
			<c:choose>
				<c:when test="${sessionScope.userName==null}">
					<ul class="navig cl-effect-3" style="float:right; width:200px">
						<li><a href="${base }/loginsystem/index.jsp">登录OR注册</a></li>
					</ul>
				</c:when>
				<c:otherwise>
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown" role="button" aria-haspopup="true"
									aria-expanded="false"><span id="current_user"><img
											src="${sessionScope.userPic }" style="width: 40px;height: 40px;border-radius: 50%">${sessionScope.userName}</span>
										<span class="caret"></span></a>
									<ul class="dropdown-menu" style="cursor: pointer">
										<li><a data-toggle="modal" data-target="#myInfo">个人信息</a></li>
										<li><a data-toggle="modal" data-target="#myArticle">我的文章</a></li>
										<li><a data-toggle="modal" data-target="#modifyPassword">修改密码</a></li>
										<li role="separator" class="divider"></li>
										<li><a href="${base }/action/login/exit">退出登录</a></li>
									</ul></li>
							</ul>
						</div>
					</c:otherwise>
			</c:choose>
		</div>
	</div>
</div>

<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li>&nbsp;&nbsp;/&nbsp;&nbsp;<li>
				<li  class="act" > <a class="act" href="${base }/foreground/hero.jsp">英雄介绍</a></li>
			</ul>
			<p><a href="${base }/foreground/index.jsp">Back to 首页</a></p>
			<div class="clearfix"></div>
		</div>
		<h3 class="page-header">
			英雄列表
		</h3>
		<div class="main">
			<ul id="hero_content">
			</ul>
		</div>
         <div class="blog-sidebar" style="float:right;width:15%">
				<h3 class="page-header">英雄职业</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄类型')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
				 <h3 class="page-header">英雄之地</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄势力')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
			</div>
          <div class="clearfix"></div>
	</div>
</div>

<!-- Games Page Ends here -->
<!-- 显示个人信息的模态框 -->
	<div class="modal fade" id="myInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的个人信息</h4>
					</div>
					<div class="modal-body" style="height: 280px">
						<iframe id="userInformation" width="100%" height="100%" frameborder="0" src="${base}/foreground/person_form.jsp"></iframe>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="closeWin">关闭</button>
						<button type="button" class="btn btn-primary" id="subIframe">更改信息</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- 显示我的文章模态框 -->
	<div class="modal fade" id="myArticle" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style=" top: 35%;left: 40%;
            transform: translate(-50%,-50%);
             min-width:60%;
             overflow: visible;">
		<div class="modal-dialog" style="width: 1000px" >
			<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的文章</h4>
					</div>
					<div class="modal-body" style="height: 500px">
						<iframe id="article_list" width="100%" height="100%" frameborder="0" src="${base}/foreground/article_list.jsp"></iframe>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
				<form action="${base}/action/user/modPassword" method="post" autocomplete="off" draggable="false" id="modPassword">
					<input type="hidden" name="id" value="${sessionScope.userId }">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tbody>
								<tr>
									<td width="30%">输入当前密码:</td>
									<td width="70%"><input type="password" class="form-control" name="oldPassword" id="oldPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">输入新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="newPassword" id="newPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">确认新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="passwordAgain" id="passwordAgain">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="checkPassword()">提交更改</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script type="text/javascript" src="${base}/foreground/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${base}/res/layui/layui.js"></script>  
<script type="text/javascript" src="${base}/foreground/js/bootstrap.min.js"></script>
<script type="text/html" id="hero_list">
	{{#  layui.each(d.data,function(index,item){  }}
		<li>                  
			<a href="${base}/action/hero/view?id={{item.heroId}}">
				<img alt="" src="{{item.heroFirPic}}">
				<p>{{item.heroName}}</p>
			</a>
		</li>
	{{#  }) }}

</script> 

<script type="text/javascript">

	function getQueryString(name) {
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	}

	layui.use([ 'element', 'laypage', 'jquery', 'laytpl' ], function() {
		var element = layui.element;
		var laypage = layui.laypage;
		var $ = layui.$;
		var laytpl = layui.laytpl;
		var count;

		var id = getQueryString("typeId");

		// 使用ajax加载数据，然后渲染数据（模板技术）
		loadPage = function(curr) {
			$.ajax({
				async : false, //同步
				url : '${base}/action/hero/list?typeId='+id,
				data : {
					limit : 150,
					page : curr
				},
				dataType : 'json',
				success : function(data) {
					count = data.count;
					var tpl = $('#hero_list').html();
					laytpl(tpl).render(data, function(html) {
						$('#hero_content').html(html);
					});
				}
			});
		}
		loadPage(1);

	});
</script>
</html>